@import "./common.less";
header {
  .width(420);
  .height(55);
  .bgC(#cf4cff);
  .relative();
  .scan {
    .width(33);
    .height(42);
    .bgI("../images/home_scan.png");
    .absolute(7, 25);
  }
  #search {
    .width(280);
    .height(30);
    .border-r(10);
    border: 1px solid transparent;
    .absolute(10,70);
    .fz(20);
    .borderBox();
    padding-left: (25 / @m);
  }
  button {
    .width(20);
    .height(20);
    background: url("../images/home_search_btn_06.png") transparent;
    background-size: contain;
    .absolute(15, 315);
    border: none;
  }
  .message {
    .width(30);
    .height(40);
    .bgI("../images/home_message.png");
    .absolute(10, 375);
  }
}
.swiper {
  // // 为固定定位腾出位置
  // margin-top: (50/@m);
  .width(420);
  .height(180);
  img {
    .width(420);
    .height(180);
  }
}
.nav {
  .width(420);
  .height(75);
  .borderBox();
  .flex();
  .fz(16);
  margin: (20 / @m) 0 (15 / @m);
  li {
    .borderBox();
    .width(85);
    .height(75);
    .bgC(#cf4cff);
    text-align: center;
    padding-bottom: (5 / @m);
    .border-r(20);
    a{
      color: #ffffff;
      img {
      .borderBox();
      margin: (5 / @m) (20 / @m);
      .width(40);
      .height(40);
    }
    }
    
  }
}
.headline {
  .bgC(#cf4cff);
  .width(420);
  .height(60);
  .relative();
  h4 {
    .width(60);
    .height(40);
    .fz(20);
    .absolute(10,25);
    color: aliceblue;
  }
  p {
    .fz(16);
    .absolute(35,80);
    color: aliceblue;
  }
  img {
    .absolute(0,220);
    .width(140);
    .height(60);
  }
}
.goods {
  margin-bottom: (60 / @m);
  padding-top: (15 / @m);
  background-color: #f8e5ff;
  .hot {
    padding-bottom: (20 / @m);
    .width(390);
    .height(180);
    .center();
    border: (1 / @m) solid transparent;
    .border-r(10);
    .relative();
    .bgI("../images/home_hot_bg.png");
    color: #ffffff;
    img {
      .width(135);
      .height(150);
      .absolute(20,235);
    }
    h3 {
      .width(90);
      .height(30);
      background-color: #cf4cff;
      .fz(16);
      .absolute(0,0);
      .border-r(15);
      text-align: center;
      .padding(5,12,5,12);
      .borderBox;
    }
    .des-long {
      .absolute(40,30);
      .fz(20);
      .lineH(25);
    }
    .des {
      .absolute(100,30);
      .fz(19);
    }
    .price {
      color: red;
      .absolute(140,30);
      .fz(18);
      span {
        .fz(25);
      }
    }
    .buy {
      .absolute(140,120);
      .width(70);
      .height(30);
      background-color: #ff3352;
      .border-r(10);
      text-align: center;
      padding: 0;
      a {
        display: block;
        // vertical-align: middle;
        .width(70);
        .height(25);
        padding-top: (8 / @m);
        color: #ffffff;
        .fz(14);
      }
    }
  }
}
.footer-nav {
  .fix-bottom();
  .width(420);
  .height(60);
  .borderBox();
  padding: (5 / @m) 0;
  .bgC(#ebb2ff);
  .flex(space-around);
  li {
    a{
      display: block;
      color: black;
      img {
      .width(30);
      .height(30);
      .zd();
      margin-bottom: (5 / @m);
    }
    p {
      .fz(16);
    }
    }
    
  }
}
